<template>
  <div class="house-type-container">
    <!-- 顶部户型选择标签 -->
    <div class="type-tabs">
      <div
          v-for="(type, index) in houseTypes"
          :key="index"
          class="type-tab"
          :class="{ active: activeTypeIndex === index }"
          @click="switchType(index)"
      >
        {{ type.name }}<br>
        <span>{{ type.area }}</span>
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 左侧户型图 -->
      <div class="floor-plan">
        <div class="floor-plan-image">
          <img :src="currentType.image" alt="户型图">
          <div class="image-controls">
            <span class="image-counter">户型图(1/1)</span>
            <button class="fullscreen-btn" @click="openFullscreen">
              <span>大图浏览</span>
            </button>
          </div>
          <div class="orientation-label">南</div>
        </div>
      </div>

      <!-- 右侧户型信息 -->
      <div class="type-info">
        <h2>{{ currentType.name }}</h2>
        <p class="basic-info">{{ currentType.rooms }}, {{ currentType.area }}</p>

        <!-- 标签区域 -->
        <div class="tags">
          <span v-for="(tag, index) in currentType.tags" :key="index" class="tag">
            {{ tag }}
          </span>
        </div>

        <!-- 价格信息 -->
        <div class="price-section">
          <div class="price-row">
            <span>参考总价</span>
            <span class="price-value">{{ currentType.price || '售价待定' }}</span>
          </div>
          <button class="calculator-btn" @click="openCalculator">
            房贷计算器
          </button>
        </div>

        <!-- 基本信息 -->
        <div class="basic-details">
          <div class="detail-row">
            <span>面积</span>
            <span>{{ currentType.area }}</span>
          </div>
          <div class="detail-row">
            <span>朝向</span>
            <span>{{ currentType.orientation }}</span>
          </div>
        </div>

        <!-- 联系方式 -->
        <div class="contact-section">
          <div class="contact-card">
            <div class="phone-number">
              {{ formattedPhone }} <span class="extension">转 {{ currentType.contact.extension }}</span>
            </div>
            <p class="contact-tip">致电售楼处了解更多信息，你的号码将被加密保护</p>
          </div>
          <button class="contact-btn" @click="callSalesOffice">
            致电售楼处
          </button>
        </div>

        <!-- 优惠信息 -->
        <div v-if="currentType.promotion" class="promotion-section">
          <div class="promotion-icon">惠</div>
          <div class="promotion-content">
            <p>本盘优惠：</p>
            <p>{{ currentType.promotion }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface HouseType {
  name: string
  area: string
  rooms: string
  orientation: string
  tags: string[]
  price?: string
  image: string
  contact: {
    phone: string
    extension: string
  }
  promotion?: string
}

// 户型数据
const houseTypes: HouseType[] = [
  {
    name: 'F1户型',
    area: '约134m²',
    rooms: '4室2厅2卫1厨',
    orientation: '朝南北',
    tags: ['在售', '主推', '大户型', '双阳台', '主卧套房'],
    image: 'https://pic4.ajkimg.com/display/xinfang/960645bd0251159bd45703fc165d60df/500x600.jpg', // 替换为实际图片URL
    contact: {
      phone: '4006708258',
      extension: '102522'
    },
    promotion: '首付30%享95折优惠'
  },
  {
    name: 'B4户型',
    area: '约213m²',
    rooms: '5室2厅3卫1厨',
    orientation: '朝南',
    tags: ['在售', '楼王', '大平层'],
    image: 'https://pic4.ajkimg.com/display/xinfang/c965e08477e215f1b65829ffa350a662/500x600.jpg', // 替换为实际图片URL
    contact: {
      phone: '4006708258',
      extension: '102523'
    }
  },
  {
    name: 'A1户型',
    area: '约165m²',
    rooms: '4室2厅2卫1厨',
    orientation: '朝东南',
    tags: ['在售', '畅销', '南北通透'],
    image: 'https://pic4.ajkimg.com/display/xinfang/f172a27b48d7707ce744a639c6c1b5e1/500x600.jpg', // 替换为实际图片URL
    contact: {
      phone: '4006708258',
      extension: '102524'
    }
  },
  {
    name: 'C1户型',
    area: '约142m²',
    rooms: '3室2厅2卫1厨',
    orientation: '朝南',
    tags: ['在售', '小高层', '性价比'],
    image: 'https://pic4.ajkimg.com/display/xinfang/63098422060d872488d250b207221edb/500x600.jpg', // 替换为实际图片URL
    contact: {
      phone: '4006708258',
      extension: '102525'
    }
  },
  {
    name: 'B1户型',
    area: '约147m²',
    rooms: '3室2厅2卫1厨',
    orientation: '朝南北',
    tags: ['在售', '边套', '双卫'],
    image: 'https://pic4.ajkimg.com/display/xinfang/42383af09f8ca38ca3525aa56ceb594d/500x600.jpg', // 替换为实际图片URL
    contact: {
      phone: '4006708258',
      extension: '102526'
    }
  }
]

const activeTypeIndex = ref(0)

// 计算当前显示的户型
const currentType = computed(() => houseTypes[activeTypeIndex.value])

// 格式化电话号码
const formattedPhone = computed(() => {
  const phone = currentType.value.contact.phone
  return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')
})

// 切换户型
const switchType = (index: number) => {
  activeTypeIndex.value = index
}

// 打开大图
const openFullscreen = () => {
  const imageUrl = currentType.value.image
  window.open(imageUrl, '_blank')
}

// 打开房贷计算器
const openCalculator = () => {
  alert('房贷计算器功能即将上线')
}

// 拨打售楼处电话
const callSalesOffice = () => {
  const phone = currentType.value.contact.phone
  window.location.href = `tel:${phone}`
}
</script>

<style scoped>
.house-type-container {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.type-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.type-tab {
  padding: 10px 15px;
  text-align: center;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  border-bottom: 2px solid transparent;
}

.type-tab span {
  font-size: 12px;
  color: #999;
}

.type-tab.active {
  color: #333;
  font-weight: bold;
  border-bottom-color: #4CAF50;
}

.type-tab.active span {
  color: #4CAF50;
}

.main-content {
  display: flex;
  gap: 20px;
}

.floor-plan {
  flex: 1;
}

.floor-plan-image {
  position: relative;
  background-color: #f5f5f5;
  padding: 20px;
  text-align: center;
}

.floor-plan-image img {
  max-width: 100%;
  height: auto;
}

.image-controls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-counter {
  font-size: 12px;
  color: #666;
}

.fullscreen-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.orientation-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(76, 175, 80, 0.8);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.type-info {
  width: 300px;
}

.type-info h2 {
  font-size: 20px;
  margin-bottom: 5px;
  color: #333;
}

.basic-info {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.tag {
  background-color: #f0f9eb;
  color: #4CAF50;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}

.price-section {
  margin-bottom: 20px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

.price-value {
  color: #4CAF50;
  font-weight: bold;
}

.calculator-btn {
  width: 100%;
  background: none;
  border: none;
  color: #4CAF50;
  text-align: left;
  padding: 5px 0;
  font-size: 14px;
  cursor: pointer;
}

.basic-details {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.contact-section {
  margin-bottom: 20px;
}

.contact-card {
  background-color: #f0f9eb;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.phone-number {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.extension {
  font-size: 14px;
  color: #666;
  font-weight: normal;
}

.contact-tip {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.contact-btn {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.promotion-section {
  display: flex;
  background-color: #fef6e6;
  padding: 10px;
  border-radius: 4px;
  border-left: 4px solid #f5c04d;
}

.promotion-icon {
  background-color: #f5c04d;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 12px;
}

.promotion-content {
  font-size: 14px;
  color: #e6a23c;
}

.promotion-content p {
  margin: 0;
}

@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .type-info {
    width: 100%;
  }
}
</style>